import {
  DollarOutlined,
  ShoppingCartOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { ProLayout } from "@ant-design/pro-components";
import { Button, Card, Col, Row, Statistic } from "antd";

import React from "react";

const ProLayoutPage: React.FC = () => {
  const menuItems = [
    {
      path: "/dashboard",
      name: "仪表板",
      icon: <UserOutlined />,
    },
    {
      path: "/users",
      name: "用户管理",
      icon: <UserOutlined />,
    },
    {
      path: "/orders",
      name: "订单管理",
      icon: <ShoppingCartOutlined />,
    },
    {
      path: "/finance",
      name: "财务管理",
      icon: <DollarOutlined />,
    },
  ];

  return (
    <ProLayout
      title="管理系统"
      menu={{
        items: menuItems,
      }}
      contentStyle={{ padding: 24 }}
    >
      <div>
        <h1>欢迎使用管理系统</h1>
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <Card>
              <Statistic
                title="总用户数"
                value={112893}
                prefix={<UserOutlined />}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="订单数量"
                value={8846}
                prefix={<ShoppingCartOutlined />}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="总收入"
                value={112893}
                prefix={<DollarOutlined />}
                suffix="元"
              />
            </Card>
          </Col>
        </Row>

        <Card style={{ marginTop: 16 }}>
          <Button type="primary">开始使用</Button>
        </Card>
      </div>
    </ProLayout>
  );
};

export default ProLayoutPage;
